<!-- 
  * Copyright (c) 2022 iSoftStone Information Technology (Group) Co.,Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
<template>
	<view class="course">
		<view class="top-image">
			<!-- <image :src="data.videoImg"></image> -->
			<image :src="data.imageUrl"></image>
		</view>
		<view class="partContent">
			<view class="title">{{data.title}}</view>
			<view class="summary">{{decodeURI(data.author)}}</view>
			<view class="introduct">{{detail}}</view>
			<view class="detail">{{data.synopsis}}</view>
		</view>
		<u-tabbar class="footer" justify="space-between" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
			:border="false">
			<view class="btn-data">
				<u-button type="info" shape="circle" @click="downloadCourse()">下载课程资料</u-button>
			</view>
			<view class="btn-course">
				<!-- <u-link class="btnLink" :href="data.videoLink" text="学习课程"></u-link> -->
				<u-button type="primary" shape="circle" @click="learnCourse()">直播回顾</u-button>
			</view>
		</u-tabbar>
		<!-- 弹窗 -->
		<view class="model">
			<u-modal :show="show" :title="theme">
				<view class="reply">回复“{{data.title}}”</view>
				<view class="qdcode">
					<u--image  width="400rpx" height="400rpx" :showLoading="true" :src="code"  @click="click"></u--image>
				</view>
				<view class="cancel" @click="cancel()">
					<image class="pic-icon" src="@/static/icon/close.png"></image>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {
		getVideoById
	} from '@/common/api.js';
	export default {
		data() {
			return {
				id: "",
				data: {
					author: "",
				},
				show: false,
				theme: "扫码关注 “开发者小助手”",
				// reply: "回复“领OpenHarmony软总线介绍”",
				// introudce: "OpenHarmony软总线介绍",
				// idea: "详解设计理念",
				detail: "详情",
				code:require("@/static/icon/code.png")
			}
		},
		onLoad: function(e) {
			this.id = e.id
		},
		onShow: function() {
			this.info()
		},
		methods: {
			info() {
				const data = {
					id: this.id
				}
				getVideoById(data).then(res => {
					console.log(res, "视频详情")
					this.data = res
				})

			},
			//下载课程资料
			downloadCourse() {
				this.show = true
			},
			//学习课程
			learnCourse() {
				wx.openChannelsActivity({
					finderUserName: this.$store.state.videoNumberId,
					feedId: this.data.videoLink,
					success: function(res) {
						console.log(res)
						
					},
					fail: function(res) {
						console.log(res)
						
					}
				})
				
			},
			//取消弹窗
			cancel() {
				this.show = false
			}
		}
	}
</script>
<style lang="scss">
	.btn-course {
		.u-link {
			color: #fff !important;
			background-color: #3c9cff;
			border-color: #3c9cff;
			border-width: 1px;
			border-style: solid;
			height: 40px;
			position: relative;
			align-items: center;
			justify-content: center;
			display: flex;
			flex-direction: row;
			box-sizing: border-box;
			flex-direction: row;
			border-top-right-radius: 100px;
			border-top-left-radius: 100px;
			border-bottom-left-radius: 100px;
			border-bottom-right-radius: 100px;
		}
	}
</style>

<style scoped lang="scss">
	.course {
		margin-top: 18rpx;
	}

	.top-image {
		height: 340rpx;
		background: #D8D8D8;
		width: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.partContent {
		/* height: 372rpx; */
		background: #ffffff;
	}

	.title {
		font-family: HarmonyHeiTi-Medium;
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		padding: 26rpx 0 4rpx 24rpx;
	}

	.summary {
		font-family: HarmonyHeiTi;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.5);
		padding: 0rpx 0rpx 28rpx 24rpx;
	}

	.introduct {
		font-family: HarmonyHeiTi-Medium;
		font-size: 24rpx;
		color: #000000;
		font-weight: bold;
		padding: 0 0 12rpx 24rpx;
	}

	.detail {
		font-family: HarmonyHeiTi;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.5);
		padding: 0 24rpx 62rpx 24rpx;
		white-space: normal;
		word-break: break-all;
	}

	.footer {
		width: 100%;
	}

	.btn-data {
		width: 40%;
		height: 96rpx;
		margin-left: 60rpx;
	}

	.btn-course {
		width: 40%;
		height: 96rpx;
		margin-left: 24rpx;
	}

	/deep/ .u-tabbar__content__item-wrapper {
		margin-top: 20rpx;
	}

	/deep/ .u-modal__content.data-v-0156a215 {
		padding: 0;
		padding-top: 0 !important;
	}

	/deep/ .u-modal__content {
		flex-direction: inherit !important;
	}

	/deep/ .u-modal__title.data-v-0156a215 {
		color: #000000;
	}

	.model {
		width: 772rpx;
		position: relative;
		.cancel {
			position: absolute;
			width: 100%;
			height: 100rpx;
			bottom: -100rpx;
			.pic-icon {
				width: 80rpx;
				height: 80rpx;
				margin: 10px auto;
				display: block;
				
			}
		}

	}

	.reply {
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.5);
		text-align: center;
		padding: 12rpx 24rpx 0 24rpx;
	}

	.qdcode {
		width: 400rpx;
		height: 400rpx;
		background: #D8D8D8;
		margin: 44rpx auto;
	}

	/deep/ .u-line {
		display: none;
	}

	/deep/ .u-modal__button-group {
		display: none !important;
	}

	/deep/.pic-icon {
		width: 80rpx;
		height: 80rpx;
	}
	/deep/ .u-popup__content{
		overflow: inherit  !important; 
	}
</style>
